<template>
  <div class="tabdetial">
    <!-- 课程列表 -->
    <Nav></Nav>
    <div class="banner-wrap">
      <img class="banner" :src="tabdetailBg" />
    </div>
    <div class="wrap">
        <div @click="goToDetail(item.id)" v-for="item in info" :key="item" class="history-item">
      <div class="title" style="margin-bottom: 19Px;">
        <div class="title-1">{{item.phone}}</div>
        <div class="title-2">测试时间：{{item.createtime}}</div>
      </div>
      <div class="title">
        <div class="title-1"></div>
        <div class="btn">查看详情</div>
      </div>
    </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '../../components/pc/Footer.vue';
import Nav from '../../components/pc/nav.vue';
import schoolProject from '../../components/pc/schoolProject.vue';
import introduceProject from '../../components/pc/introduceProject.vue';
import consultationProject from '../../components/pc/consultationProject.vue';
import { onMounted, ref } from 'vue';
import { getRecordinfo,getRecord } from '../../api/apiList/homePage.js';
import { getCoursePC } from '../../api/apiList/pcApi.js';
import tabdetailBg from '../../assets/pc/tabdetail-bg.png';
import homepageTab2 from '../../assets/pc/homepage-tab2.png';
import homepageTab3 from '../../assets/pc/homepage-tab3.png';
import homepageTab4 from '../../assets/pc/homepage-tab4.png';
import homepageTab5 from '../../assets/pc/homepage-tab5.png';
let info = ref({});
import { useRouter } from 'vue-router';
const router = useRouter();
let currentIndex = ref(-1);
const goToDetail = (id) => {
    // {token: sessionStorage.getItem('PHONE-TOKEN'), id}
  getRecordinfo({token: sessionStorage.getItem('PHONE-TOKEN'), id}).then((res)=>{
    router.push({
      path: '/listPc',
      query: { list: encodeURIComponent(JSON.stringify(res.result)) }
    });
  })
};

onMounted(async () => {
  // 获取列表数据 0招生信息 1大学推荐
    await getRecord({token:sessionStorage.getItem('PHONE-TOKEN')}).then((res) => {
    const { result } = res;
    info.value = result;
  });
});

</script>

<style lang="less" scoped>
 .history-item {
    height: 133Px;
    background-image: url('../../assets/pc/history-bg.jpg');
    margin-top: 30Px;
    background-size: 1200Px 133Px;
    background-repeat: no-repeat; 
    padding: 0 23Px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title-1 {
        font-size: 18Px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 25Px;
      }
      .title-2 {
        font-size: 18Px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 25Px;
      }
    }
    .btn {
        width: 85Px;
        height: 27Px;
        border-radius: 16Px;
        border: 1Px solid #C5B6FD;
        font-size: 13Px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 27Px;
        text-align: center;
        cursor: pointer;
    }
  }
.tabdetial {
    .introduce-wrap {
        margin-top: 15Px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
  .wrap {
    position: relative;
    width: 1201Px;
    margin: 0 auto;
   
  }
  .banner-wrap {
    position: relative;
    width: 100vw;
    height: auto;
  }
  .banner {
    width: 100vw;
    height: auto;
    margin-bottom: 30Px;
  }
  .tab {
    font-size: 23Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000;
    line-height: 40Px;
    margin-bottom: 30Px;
    display: flex;
    align-items: center;
    .line {
        width: 3Px;
        height: 20Px;
        background: linear-gradient(140deg, #011a35 0%, #000000 100%);
    }
    span {
      display: inline-block;
      margin-right: 20Px;
    }
  }

}
</style>
